<template>
    <div>
             <el-table
          :data="data"
          style="width: 100%"
          height="610"
          stripe
          :default-sort="{ prop: 'date', order: 'descending' }"
          :cell-style="rowClass"
          :header-cell-style="headClass"
          class="tableBox"
        >
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="xuhao" label="项目名称" width="180">
          </el-table-column>
          <el-table-column prop="date" label="项目编码" sortable width="180">
          </el-table-column>
          <el-table-column prop="date" label="项目分类" width="180">
          </el-table-column>
          <el-table-column prop="name" label="批次信息" width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="所属单位"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="项目管理类型"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            prop="xuhao"
            label="总投资（万元）"
            sortable
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="xuhao"
            label="当年计划（万元）"
            sortable
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="下达状态"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="可研批复文号"
            :formatter="formatter"
          >
          </el-table-column>
        </el-table>
          <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.length"
          >
          </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        props:['data'],
        data () {
            return {
                 currentPage4: 1,  
            }
        },
        mounted () {
            // console.log('table');
          //  console.log(this.data) 
        },
        methods: {
    formatter(row, column) {
      return row.address;
    },
              // 表头样式设置
    headClass() {
      return "text-align: center;background:#eef1f6;height:61px;";
    },
      // 表格样式设置
     rowClass() {
      return "text-align: center;height:61px;";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
        }
    }
</script>

<style scoped>
.block {
  width: 100%;
}
.el-pagination {
  margin-top: 15px;
  padding: 5px 0 !important;
  text-align: center;
  /* line-height: 70px; */
}
</style>